<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="css/vant.css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="script/vue.min.js"></script>
    <script type="text/javascript" src="script/vant.min.js"></script>
    <script type="text/javascript" src="script/fastclick.js"></script>
    <script type="text/javascript" src="script/base.js"></script>
    <script type="text/javascript" src="script/scanTransf.js"></script>
    <style type="text/css">
        .bg {
            width: 100%;
            height: 100%;
            background-image: url(image/login.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            padding: 60px 25px 0 25px;
            background-color: #ffffff;
        }

        .op {
            font-weight: 700;
            color: #f7f7fb;
            font-size: 60px;
            margin-left: -34px;
            letter-spacing: -2px;
        }

        .logo {
            /* margin-top: -34px; */
            /* padding-top: 30px; */
            padding-bottom: 40px;
            text-align: center;
        }

        .logo img {
            /* margin-right: 10px; */
            width: 70px;
        }

        .logo span {
            vertical-align: middle;
            font-size: 20px;
            font-weight: 700;
            color: rgba(104, 132, 173, 0.5);
        }

        .logo .mes {
            font-size: 26px;
            position: relative;
            top: 3px;
            left: 4px;
        }

        .form>div {
            background: #f7f7fb;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        .form .label {
            font-size: 14px;
            color: #69707f;
            padding: 8px 16px 0 16px;

        }

        .form .van-cell {
            background: transparent;
            padding: 7px 16px;
        }

        .login-btn {
            padding-top: 20px;
        }

        .checkbox {
            background: transparent !important;
        }

        .van-checkbox__icon {
            background: #efefef;
        }

        .van-checkbox__icon .van-icon {
            border: 1px solid #efefef;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="bg">
            <div>
                <div class="op">Lawrence</div>
                <div class="logo">
                    <img src="image/logo.png">
                    <span>劳伦斯内部管理系统</span>
                </div>
                <div class="form">
                    <div>
                        <div class="label">账号</div>
                        <van-field v-model="formData.loginName" placeholder="请输入账号"></van-field>
                    </div>
                    <div>
                        <div class="label">密码</div>
                        <van-field v-model="formData.pwd" type="password" placeholder="请输入密码"></van-field>
                    </div>
                    <div class="checkbox">
                        <van-checkbox v-model="isRemb" shape="square" checked-color="#3370ff" icon-size="18px">
                            <span style="color:#aaa">记住密码</span>
                        </van-checkbox>
                        <!-- <span style="float: right;margin-top: -20px;color: #3396fb;" @click="rTest">注册</span> -->
                    </div>
                </div>
                <div class="login-btn">
                    <van-button color="#3370ff" round :disabled="ifConfirm" :loading="ifConfirm" loading-text="登录中..."
                        type="primary" block @click="loginAPP">登&nbsp;&nbsp;&nbsp;&nbsp;录</van-button>
                </div>
            </div>
        </div>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {

        APP.exitApp();

        var loginIndex = 0;


        function ping(ip) {

            api.ajax({
                url: 'http://' + ip + '/Frame/SqlData?cmdname=ConnectionTest',
                data: {
                    values: {}
                },
                timeout: 20,
                method: 'post',
                dataType: 'json'
            }, function (ret, err) {
                if (ret) {
                    window.localStorage.setItem('serverIP', ip);
                    // APP.serverIP = ip;
                    vm.checkLoginStatus();
                } else {

                }
            });
        }





        api.setStatusBarStyle({
            style: 'dark'
        });

        api.addEventListener({
            name: 'clearLoginInfo'
        }, function (ret, err) {
            vm.formData.loginName = '';
            vm.formData.pwd = '';
            vm.isRemb = false;
        })



        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                formData: {
                    loginName: '',
                    pwd: ''
                },
                isRemb: false,
                ifConfirm: false
            },
            created: function () {
                var that = this;

                ping(APP.serverIP1);
                ping(APP.serverIP2);

            },
            methods: {
                rTest: function () {
                    api.openWin({
                        name: 'register',
                        url: 'register.html',
                        reload: true,
                        slidBackEnabled: false
                    })
                },
                checkLoginStatus: function () {
                    var that = this;
                    if (loginIndex) {
                        that.loginAPP();
                    } else {
                        if (APP.getUserInfo()) {
                            that.formData.loginName = APP.getUserInfo().loginName;
                            if (APP.getUserInfo().isRemb && APP.getUserInfo().pwd) {
                                that.formData.pwd = APP.getUserInfo().pwd;
                                that.isRemb = true;
                                that.loginAPP();
                            }
                        }
                    }

                },
                loginAPP: function () {
                    var that = this;
                    if (!that.formData.loginName) {
                        layer.open({
                            content: '请填写登录账户',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.pwd) {
                        layer.open({
                            content: '请填写登录密码',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    that.ifConfirm = true;

                    var obj = {
                        P_Name: that.formData.loginName,
                        P_Password: that.formData.pwd
                    }
                    APP.ajax('APP_Login', obj, function (res) {
                        that.ifConfirm = false;
                        loginIndex = 0;
                        if (res.ds[0].status && res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });

                        } else {
                            res.ds[0].isRemb = that.isRemb;
                            res.ds[0].loginName = that.formData.loginName;
                            res.ds[0].pwd = that.formData.pwd;
                            window.localStorage.setItem('userInfo', JSON.stringify(res.ds[0]));
                            api.openWin({
                                name: '主页',
                                url: 'html/base.html',
                                reload: true,
                                slidBackEnabled: false
                            })
                        }
                    }, function (res) {
                        loginIndex++;
                        if (loginIndex < 10) {
                            ping(APP.serverIP1);
                            ping(APP.serverIP2);
                        } else {
                            layer.open({
                                content: '登录失败，请检查网络设置后重试',
                                skin: 'msg',
                                time: 3
                            });
                            loginIndex = 0;
                            that.ifConfirm = false;
                        }

                    })

                }
            }
        })
    };
</script>

</html>